<style>
    .gsclass label {
        width: 100%;
        height: 100%;
        margin: 0;
        user-select: none;
        font-weight: normal;
    }

    .gsclass label input {
        margin-right: 100px !important;
    }

    .selval {
        max-height: 21vh;
        overflow: auto;
        margin-top: -20px;
    }

    .selval table {
        margin: 0;
    }
</style>
<div id="main">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="ntModalLabel">{:strtoupper(lang('add/change_company_attribute_profile'))}</h4>
    </div>
    <div class="modal-body">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="alert alert-dismissable alert-info">
                    <button type="button" class="close">×</button>
                    <p></p>
                </div>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 column">
                <ul class="nav nav-tabs">
                    <li :class="{'active':index==0}" v-for="(langitem,index) in langs">
                        <a :href="'#'+langitem.code" data-toggle="tab" @click="changelang(langitem.code)">{{langitem.name}}</a>
                    </li>
                </ul>
            </div>
        </div>
        <table class="table table-striped table-hover ntTable">
            <tbody>
            {if ($str neq 'coattredit')}
            <tr>
                <td style="width: 150px;">{:strtoupper(lang('attribute_name'))}<span class="required"></span></td>
                <td>
                    <input type="text" class="form-control" placeholder="{:lang('attribute_name')}"
                           v-model="coattrname">
                </td>
            </tr>
            {/if}
            </tbody>
        </table>
        <div class="row clearfix">
            <div class="col-md-6">
                <div class="tab-content" v-cloak>
                    <div role="tabpanel" :class="{'tab-pane':true, 'active':index==0}" :id="langitem.code"
                         v-for="(langitem,index) in langs">
                        <table class="table table-striped table-hover ntTable">
                            <tbody>
                            <tr v-if="isedit=='coattredit'">
                                <td>{:strtoupper(lang('attribute_name'))}<span class="required"></span></td>
                                <td>
                                    <input type="text" class="form-control" placeholder="{:lang('attribute_name')}"
                                           v-model="data['lang_'+langitem.code]">
                                </td>
                            </tr>
                            <tr>
                                <td>{:strtoupper(lang('country'))}<span class="required"></span></td>
                                <td>
                                    <select class="form-control" v-model="countries">
                                        <option value="0">{:lang('universal')}</option>
                                        <option value="1">{:lang('BRASIL')}</option>
                                        <option value="2">{:lang('CHINA')}</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>个人<span class="required"></span></td>
                                <td>
                                    <label class="radio-inline" style="padding:0;">
                                        <input type="checkbox" value="option1" @click="changeper" :checked="personal">
                                        {:lang('this_attribute_is_suitabel_for_individuals')}
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <td>{:strtoupper(lang('type'))}<span class="required"></span></td>
                                <td>
                                    <label class="radio-inline">
                                        <input type="radio" value="text" id="typeText"
                                               :checked="typeclass=='text'" @click="changeche('text')"> {:lang('text')}
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" value="select" id="typeSelect"
                                               :checked="typeclass=='select'" @click="changeche('select')">
                                        {:lang('select_box')}
                                    </label>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <table class="table table-striped table-hover ntTable">
                    <thead>
                    <tr>
                        <th>{:strtoupper(lang('selected_value'))}</th>
                    </tr>
                    </thead>
                </table>
                <div class="selval" v-cloak>

                    <table class="table table-striped table-hover ntTable" id="selectValue" v-if="typeclass=='select'">
                        <tbody>
                        <tr v-for="(item,index) in selval">
                            <td>
                                <div class="input-group">
                                    <input type="text" class="form-control" v-model="item.option_text">
                                    <span class="input-group-btn">
                                        <button class="btn btn-default" type="button" @click="delrow(index)">
                                            <span class="glyphicon glyphicon-remove" style="margin:0"></span>
                                        </button>
                                    </span>
                                </div>

                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="input-group">
                                    <input type="text" class="form-control addput">
                                    <span class="input-group-btn">
                                    <button class="btn btn-default" type="button" @click="addrow">
                                        <span class="glyphicon glyphicon-plus" style="margin:0"></span>
                                    </button>
                                </span>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-md-6 clearfix">
                <div class="cat_panel">
                    <table class="gsclass" v-cloak>
                        <thead>
                        <tr>
                            <td colspan="2">{:strtoupper(lang('company_type'))}</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in gstype">
                            <td>
                                <label>
                                    <input type="checkbox" @click="chestypefun(item.id)" :checked="item.is_che">
                                    {{item.content}}
                                </label>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
    <div class="modal-footer">
        <input type="hidden" id="act" value="{$str}">
        <input type="hidden" id="did" value="{$id|default=''}">
        <button type="button" class="btn btn-default" data-dismiss="modal"><span
                class="glyphicon glyphicon-remove"></span>{:strtoupper(lang('cancel'))}
        </button>
        <button type="button" :disabled="isdisadble" class="btn btn-primary" @click="savefun" style="padding-left:24px;padding-right:24px">
            <span class="glyphicon glyphicon-floppy-disk"></span>{:strtoupper(lang('save'))}
        </button>
    </div>
</div>
<script>
    new Vue({
        el: '#main',
        data: () => ({
            langs: [],
            isedit: $('#act').val(),
            lang: 'zh',
            data: {},
            typeclass: 'select',
            selval: [],
            gstype: [],
            checkall: [],
            countries: 0,
            coattrname: '',
            personal: true,
            isdisadble:false
        }),
        methods: {
            //数据的获取(添加或者编辑)
            getdata(is){
                $('.loding').show();
                $.ajax({
                    url: '/admin/customer/' + $('#act').val(),
                    data: {
                        getcoattr: '',
                        langs: this.lang,
                        id: $('#did').val(),
                    },
                    type: 'post',
                    dataType: 'json',
                    success: (data) => {
                        //公司类型
                        this.gstype = data.cotypedata;
                        if (data.info) {
                            //编辑的数据
                            infodata = data.info;
                            this.selval = infodata.coattr_select;
                            infodata.is_text == 1 ? this.typeclass = 'select' : this.typeclass = 'text'
                            //切换语言时，这个值，是不用变的
                            if(!is){
                                this.langs.forEach(element => {
                                    this.data['lang_' + element.code] = infodata['lang_' + element.code]
                                });
                            }
                            this.countries = infodata.country_id
                            this.personal = infodata.person ? true : false
                            this.checkall = infodata.cotype_ids.split(",")
                            var cotype_ids = infodata.cotype_ids.split(',').map((element) => {
                                return element - 0
                            })
                            this.gstype.map((element) => {
                                if (cotype_ids.indexOf(element.id) == -1) {
                                    element.is_che = false
                                } else {
                                    element.is_che = true
                                }
                            })
                        } else {
                            //添加的数据
                            this.gstype.map((element) => {
                                element.is_che = false
                            })
                        }
                        $('.loding').hide();
                    }
                })
            },
            //选择框和文本框的判断
            changeche(type){
                this.typeclass = type
            },
            //移除当前行
            delrow(index){
                this.selval.splice(index, 1)
            },
            //追加一行
            addrow(){
                if ($('.addput').val().length > 0) {
                    this.selval.push({
                        'id': '',
                        'option_text': $('.addput').val()
                    })
                    $('.addput').val('')
                } else {
                    change_mes_type('.modal-body .alert', 2)
                    $('.modal-body .alert').show()
                    $('.modal-body .alert p').html('*选择框的值不能为空' + '<br>')
                    $('.addput').attr("disable", true);
                }
            },
            //改变公司类型
            chestypefun(did, index){
                if (this.checkall.indexOf(did + '') == -1) {
                    this.checkall.push(did + '')
                } else {
                    this.checkall.splice(this.checkall.indexOf(did + ''), 1)
                }
            },
            //保存
            savefun(){
                this.isdisadble=true;
                if ($('#act').val() == 'coattredit') {
                    var data = {
                        is_text: this.typeclass == 'text' ? 0 : 1,
                        option_text: this.typeclass == 'text' ? [] : JSON.parse(JSON.stringify(this.selval)),
                        cotype_ids: this.checkall,
                        act: $('#act').val(),
                        id: $('#did').val(),
                        country_id: this.countries,
                        person: this.personal ? 1 : 0,
                    }
                    this.langs.forEach(element => {
                        data['lang_' + element.code] = this.data['lang_' + element.code]
                    });
                } else {
                    var data = {
                        coattrname: this.coattrname,
                        is_text: this.typeclass == 'text' ? 0 : 1,
                        option_text: this.typeclass == 'text' ? [] : JSON.parse(JSON.stringify(this.selval)),
                        cotype_ids: this.checkall,
                        act: $('#act').val(),
                        id: $('#did').val(),
                        country_id: this.countries,
                        person: this.personal ? 1 : 0,
                    }
                }
                if (this.typeclass == 'select' && $('.addput').val().length) {
                    data.option_text.push({
                        'id': '',
                        'option_text': $('.addput').val(),
                    })
                }
                $.ajax({
                    url: '/admin/customer/' + $('#act').val(),
                    data,
                    type: 'post',
                    success: (data) => {
                        data = JSON.parse(data)
                        if (data.status != 1) {
                            change_mes_type('.modal-body .alert', data.status)
                            $('.modal-body .alert').show()
                            $('.modal-body .alert p').html('*' + data.msg + '<br>')
                            //toastr.warning(data.msg)
                        } else {
                            change_mes_type('#headeralert', data.status)
                            $('#headeralert').show()
                            $('#headeralert p').html('*' + data.msg + '<br>')
                            //toastr.info(data.msg)
                            $('#coatt_editModal').modal('toggle')
                        }
                        this.isdisadble=false;
                    }
                })
            },
            //改变语言
            changelang(lang){
                this.lang = lang
                this.getdata(1)
            },
            //是否使用个人
            changeper(){
                this.personal = !this.personal
            },
        },
        created() {
            $.ajax({
                url: '/admin/api/getLangType',
                type: 'post',
                success: data => {
                    lansdata = JSON.parse(data);
                    this.langs = lansdata
                    this.lang = lansdata[0].code;
                    this.langs.forEach(element => {
                        this.data['lang_' + element.code] = ''
                    });
                    //获取数据
                    this.getdata()
                }
            })
        }
    })
</script>